<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" width="500" height="500" style="border: 1px red solid;"></canvas>
		<canvas id="canvas2" width="500" height="500" style="border: 1px red solid;"></canvas>
		<button id="btn1">aaa</button>
		<button id="btn2">bbb</button>
	</body>
	<script type="text/javascript">
		var canvas = document.getElementById("canvas");
		var context = canvas.getContext("2d");
		var canvas2 = document.getElementById("canvas2");
		var context2 = canvas2.getContext("2d");
		var img = new Image;
		img.src = "56-刘昕男/company-2.png"
		window.addEventListener("load",function(){
//			var lgd = context.createLinerGradient(0,400,0,0);
//		    lgd
			context.drawImage(img,0,0);
		})
		
		document.getElementById("btn1").onclick = function(event){
			var canvas1Data = context.getImageData(0,0,canvas.width,canvas.height);
			var data = canvas1Data.data;
			for (var i = 0; i < data.length;i += 4) {
				data[i] = 255 - data[i];
				data[i + 1] = 255 - data[i];
				data[i + 2] = 255 - data[i];
				data[i + 3] = 255 - data[i];
			}
			context2.putImageData(canvas1Data,0,0);
		}
		document.getElementById("btn2").onclick = function(event){
			var canvasData = context.getImageData(0,0,canvas2.width,canvas2.height);
			var data = canvasData.data;
			for (var i = 0; i < data.length;i += 4) {
				var average = (data[i] + data[i+1] + data[2])/3;
				data[i] = average;
				data[i + 1] = average;
				data[i + 2] = average;
				data[i + 3] = 255;
			}
			
			context2.putImageData(canvasData,0,0);
		}
		
	</script>
</html>
